<template>
  <el-container>
    <el-header>
      <h2>BIM 设置</h2>
    </el-header>
    <el-main>
      <el-form :model="form" label-width="150px">
        <el-form-item label="LOD 级别控制">
          <el-input
            v-model="form.lodLevel"
            type="number"
            placeholder="输入1-3数字"
            min="1"
            max="3"
          />
        </el-form-item>

        <el-form-item label="BIM 模型缓存 (MB)">
          <el-input
            v-model="form.bimCache"
            type="number"
            placeholder="输入1-1024数字"
            min="1"
            max="1024"
          />
        </el-form-item>

        <el-form-item label="属性信息显示">
          <el-select v-model="form.attributeDisplay">
            <el-option label="是" value="是" />
            <el-option label="否" value="否" />
          </el-select>
        </el-form-item>

        <el-form-item label="颜色编码 (RGB)">
          <el-input
            v-model="form.rgbValues"
            placeholder="输入RGB三原色数值，格式：0,125,255"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const form = ref({
      lodLevel: 1, // LOD 级别控制，默认值
      bimCache: 512, // BIM 模型缓存，默认值
      attributeDisplay: "是", // 属性信息显示，默认值
      rgbValues: "0,125,255" // RGB 三原色数值，默认值
    });

    const save = () => {
      const { lodLevel, bimCache, rgbValues } = form.value;

      if (lodLevel < 1 || lodLevel > 3) {
        ElMessage.error("LOD 级别控制必须在1到3之间");
        return;
      }
      if (bimCache < 1 || bimCache > 1024) {
        ElMessage.error("BIM 模型缓存必须在1到1024之间");
        return;
      }

      // RGB 输入格式校验
      const rgbArray = rgbValues.split(",").map(Number);
      if (
        rgbArray.length !== 3 ||
        rgbArray.some(value => value < 0 || value > 255)
      ) {
        ElMessage.error("RGB 颜色编码必须是三个数值，范围在0-255之间");
        return;
      }

      ElMessage.success("保存成功！");
      console.log("保存的设置:", form.value);
      // 在这里可以添加实际的保存逻辑，例如 API 请求
    };

    const cancel = () => {
      ElMessage.info("取消操作");
      // 取消逻辑，例如重置表单
    };

    return { form, save, cancel };
  }
};
</script>

<style scoped>
.el-header {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
}
</style>
